<template>
  <div class="home-chain">
    <el-card class="box-card">
      <div slot="header">
        <span class="box-header"><i class="iconfont icon-lianjie1"/>友链</span>
        <router-link to="/friendChain" style="margin-left: 280px; font-size: 12px;text-decoration: none;color: #4c4948;">更多&gt;</router-link>
      </div>
      <div class="chain-list">
        <el-table
            :data="chainList"
            border
            :show-header="false"
            style="width: 100%">
          <el-table-column
              prop="avatar"
              label="封面"
              width="60">
            <template slot-scope="scope">
              <el-image :src="scope.row.avatar"></el-image>
            </template>
          </el-table-column>
          <el-table-column
              label="标题">
            <template slot-scope="scope">
              <a :href="scope.row.url" target="_blank" style="text-decoration: none">
                {{ scope.row.name }}
              </a>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import {listFriendChain} from "@/api";

export default {
  name: "home-chain",
  data() {
    return {
      chainList: []
    }
  },
  created() {
    this.listFriendChain()
  },
  methods: {
    listFriendChain() {
      listFriendChain().then(res => {
        this.chainList = res.data;
      })
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.box-header:hover {
  color: red;
  font-weight: bold;
}

</style>
